<route lang="json5" type="page">
{
  style: {
    navigationBarTitleText: '能量兑换',
    navigationStyle: 'custom',
  },
}
</route>
<template>
  <view class="game-hall">
    <!-- 顶部返回按钮 -->
    <view class="back-button" @click="handleBack">
      <wd-icon name="arrow-left" size="22px"></wd-icon>
    </view>
    <!-- 顶部用户信息区域 -->
    <view class="header">
      <view class="user-info">
        <view class="user-info-left">
          <HeaderTip />
        </view>
      </view>
    </view>

    <!-- 资源展示区域 -->
    <Resource :resource="resource" />

    <!-- 能量交易区域 -->
    <view class="energy-trade-container">
      <!-- 标题 -->
      <view class="title-container">
        <view class="title-line"></view>
        <view class="trade-title">能量兑换</view>
        <view class="title-line"></view>
      </view>
      <view class="energy-trade">
        <!-- 能量棒选择区域 -->
        <view class="energy-select-section">
          <view class="section-title">
            <text class="title-icon">▶</text>
            <text class="title-text">请选择所需交易的能量棒</text>
          </view>

          <view class="energy-bars">
            <view
              class="energy-bar"
              :class="{ active: selectedEnergy === 'blue' }"
              @click="handleSelect('blue')"
            >
              <image src="/static/images/home/blueCrystal.png" mode="aspectFit"></image>
            </view>
            <view
              class="energy-bar"
              :class="{ active: selectedEnergy === 'red' }"
              @click="handleSelect('red')"
            >
              <image src="/static/images/home/redCrystal.png" mode="aspectFit"></image>
            </view>
            <view
              class="energy-bar"
              :class="{ active: selectedEnergy === 'gold' }"
              @click="handleSelect('gold')"
            >
              <image src="/static/images/home/goldCrystal.png" mode="aspectFit"></image>
            </view>
          </view>
        </view>

        <!-- 输入区域 -->
        <view class="inputs-container">
          <view class="input-group">
            <view class="section-title">
              <text class="title-icon">▶</text>
              <text class="title-text">请输入兑换材料数量</text>
            </view>
            <input
              class="trade-input"
              v-model="tradeAmount"
              type="number"
              placeholder="请输入交易数量"
              placeholder-style="color: #666;"
            />
          </view>

          <view class="input-group">
            <view class="section-title"></view>
            <view class="exchangeResults">
              <image src="/static/images/rank/redBang.png" mode="aspectFit"></image>
              <wd-icon name="close" size="40rpx"></wd-icon>
              4
            </view>
          </view>
        </view>

        <!-- 确认按钮 -->
        <view class="confirm-button-container">
          <view class="confirm-button" @click="confirmTrade">确认</view>
        </view>
      </view>
      <view class="rules">
        <view class="title">
          <text class="title-icon">▶</text>
          <text class="title-text">兑换规则数量</text>
          <text class="title-icon">◀</text>
        </view>
        <view class="rule-image">
          <image src="/static/images/my/energyExchange/rule.png" mode="aspectFit"></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import HeaderTip from '@/components/Header/index.vue'
import Resource from '@/components/resource/index.vue'
const resource = ref({
  blue: 200000,
  blue1: 10000,
  red: 200000,
  red1: 10000,
  gold: 200000,
  gold1: 10000,
})
const type = ref('energyTrade')

// 能量交易相关数据
const tradeAmount = ref('1000000') // 默认交易数量
const targetId = ref('1234576') // 默认对方ID
const selectedEnergy = ref('blue')

// 处理能量棒选择
const handleSelect = (energyType) => {
  selectedEnergy.value = energyType
}

// 确认交易
const confirmTrade = () => {
  if (!tradeAmount.value || !targetId.value) {
    uni.showToast({
      title: '请填写完整信息',
      icon: 'none',
    })
    return
  }

  // 这里可以添加交易逻辑
  console.log('确认交易:', {
    energyType: selectedEnergy.value,
    amount: tradeAmount.value,
    targetId: targetId.value,
  })

  // 模拟交易成功
  uni.showToast({
    title: '交易请求已发送',
    icon: 'success',
  })
}

// 返回上一页
const handleBack = () => {
  uni.navigateBack()
}
</script>

<style lang="scss">
.game-hall {
  min-height: 100vh;
  background-image: url('/static/images/login/loginBackground.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  color: #ffffff;
  padding: 20rpx;
  overflow: hidden;

  .header {
    padding: 20rpx 0;
    position: relative;
    z-index: 10;

    .user-info {
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: 100%;
    }

    .top-buttons {
      display: flex;
      gap: 30rpx;

      .top-btn {
        font-size: 44rpx;
        color: #fff;
        text-shadow: 0 0 10rpx rgba(46, 131, 255, 0.6);
        &:active {
          transform: scale(0.9);
        }
      }
    }
  }

  // 能量交易容器
  .energy-trade-container {
    // 标题容器
    .title-container {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      margin-bottom: 40rpx;
    }

    // 标题线条
    .title-line {
      flex: 1;
      height: 2rpx;
      background: #00ffff;
      margin: 0 20rpx;
    }

    // 标题样式
    .trade-title {
      font-size: 48rpx;
      color: #fff;
    }
    .energy-trade {
      padding: 0 20rpx;
    }
    // 区域标题
    .section-title {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;
      height: 40rpx;
      .title-icon {
        color: #00ffff;
        margin-right: 10rpx;
        font-size: 24rpx;
      }

      .title-text {
        color: #fff;
        font-size: 28rpx;
      }
    }

    // 能量棒选择区域
    .energy-select-section {
      margin-bottom: 40rpx;
    }

    .energy-bars {
      display: flex;
      justify-content: space-around;
      gap: 50rpx;

      .energy-bar {
        flex: 1;
        height: 100rpx;
        background-image: url('/static/images/my/energyTrade/dark.png');
        background-size: 100% 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.3s ease;

        &.active {
          background-image: url('/static/images/my/energyTrade/active.png');
          background-size: 100% 100%;
        }

        image {
          width: 80rpx;
          height: 80rpx;
        }
      }
    }

    // 输入区域容器
    .inputs-container {
      display: flex;
      justify-content: space-between;
      gap: 20rpx;
    }

    .input-group {
      flex: 1;
    }

    .trade-input {
      height: 100rpx;
      background: rgba(255, 255, 255, 0.1);
      color: #000;
      padding: 0 20rpx;
      font-size: 32rpx;
      background-image: url('/static/images/my/energyTrade/inputBg.png');
      background-size: 100% 100%;
    }
    .exchangeResults {
      height: 100rpx;
      background: rgba(255, 255, 255, 0.1);
      color: #000;
      padding: 0 20rpx;
      font-size: 48rpx;
      background-image: url('/static/images/my/energyTrade/inputBg.png');
      background-size: 100% 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      > image {
        width: 50rpx;
        height: 60rpx;
      }
    }
    .confirm-button-container {
      text-align: right;
      position: relative;
      height: 160rpx;
    }
    // 确认按钮
    .confirm-button {
      width: 200rpx;
      height: 120rpx;
      background-image: url('/static/images/my/energyTrade/ok.png');
      background-size: 100% 100%;
      border: none;
      color: #000;
      font-size: 36rpx;
      font-weight: bold;
      text-align: center;
      line-height: 120rpx;
      margin-top: 50rpx;
      transition: all 0.3s ease;
      position: absolute;
      right: 0;
      &:active {
        transform: scale(0.95);
        box-shadow: 0 0 20rpx rgba(0, 240, 255, 0.4);
      }
    }
  }
}
.rules {
  width: 100%;
  margin: 40rpx 0;
  text-align: center;
  // 区域标题
  .title {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20rpx;
    height: 40rpx;
    width: 100%;
    .title-icon {
      color: #00ffff;
      margin-right: 10rpx;
      font-size: 24rpx;
    }

    .title-text {
      color: #fff;
      font-size: 35rpx;
    }
  }
  .rule-image {
    width: 100%;
    image {
      width: 100%;
    }
  }
}
</style>
